@tailwind base;
@tailwind components;
@tailwind utilities;

body {
	@apply h-screen font-yahei bg-gradient-to-br from-sky-400  via-white via-45% to-lime-500 text-hui-300
}

/*Alter*/
.mc {
	@apply w-full flex justify-center absolute top-0 text-sm z-50;
}
.alter-error {
	@apply bg-red-100 rounded-lg py-2  text-red-700 px-4 min-w-[320px] text-center;
}
.alter-success {
	@apply bg-green-100 rounded-lg py-2  text-green-700 px-4 min-w-[320px] text-center;
}

/**BTN**/
.btn {
	@apply rounded border px-3 py-1 h-9 bg-white text-[14px] duration-200 hover:border-sky-300 hover:text-sky-500 whitespace-nowrap flex items-center justify-center;
}
.btn-lan {
	@apply border-none bg-sky-500 text-white text-[14px] duration-200 hover:text-white hover:bg-sky-600 active:bg-sky-500;
}
.btn-hong {
	@apply border-none bg-red-500 text-white text-[14px] duration-200 hover:text-white hover:bg-red-600 active:bg-red-500;
}
.btn-lv {
	@apply border-none bg-green-600 text-white text-[14px] duration-200 hover:text-white hover:bg-green-700 active:bg-green-600;
}
.btn-chen {
	@apply border-none bg-orange-500 text-white text-[14px] duration-200 hover:text-white hover:bg-orange-600 active:bg-orange-500;
}
.btn-qin {
	@apply border-none bg-cyan-500 text-white text-[14px] duration-200 hover:text-white hover:bg-cyan-600 active:bg-cyan-500;
}
.btn-zi {
	@apply border-none bg-indigo-500 text-white text-[14px] duration-200 hover:text-white hover:bg-indigo-600 active:bg-indigo-500;
}
.btn-disabled {
	@apply border-none bg-slate-200 text-white text-[14px] duration-200  hover:border-slate-200 hover:text-white cursor-not-allowed;
}
.btn-small {
	@apply h-6 px-1;
}
.btn-large {
	@apply h-10 px-5;
}

.yp-table-datalist {
	@apply w-full text-left text-sm
}
.yp-table-datalist > thead {
	@apply border-t bg-gray-100;
}
.yp-table-datalist > thead > tr {
	@apply border-b
}
.yp-table-datalist > thead > tr > th {
	@apply p-2;
}
.yp-table-datalist > tbody > tr {
	@apply hover:bg-gray-100 border-b;
}
.yp-table-datalist > tbody > tr > td {
	@apply p-2;
}

.authrule {
	@apply text-sm;
}
.authrule .end-item {
	@apply py-2 border-b hover:bg-gray-100;
}
.authrule .pre-item {
	@apply py-2 border-b cursor-pointer hover:bg-gray-100;
}

.ypmenu {
	@apply border-t border-l border-r text-sm relative;
}
.ypmenu .end-item {
	@apply py-1.5 border-b hover:bg-gray-100;
}
.ypmenu .pre-item {
	@apply py-1.5 border-b cursor-pointer hover:bg-gray-100;
}

/*dialog*/
.dialog {
	@apply absolute bg-white shadow-md rounded;
}
/*pages*/
.pages {
	@apply flex justify-center items-center text-sm;
}
.pages > div {
	@apply h-8 mx-1 flex items-center duration-300 justify-center rounded-sm border cursor-pointer bg-hui-50 px-2 hover:bg-lan-300 hover:border-lan-300 hover:text-white;
}
.pages > div.current {
	@apply h-8 mx-1 flex items-center justify-center rounded-sm cursor-pointer bg-lan-300 text-white px-2;
}

/*tooltips*/
.tooltips {
	@apply text-xs p-2 fixed top-0 left-0 bg-slate-700 whitespace-nowrap text-white z-50 inline-block min-w-3 rounded;
}
.tooltip-arrow {
	border-width: 8px;
	@apply absolute w-0 h-0;
}
.tooltip-arrow.left {
	border-color: transparent transparent transparent #303133;
	right: -15px;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}
.tooltip-arrow.bottom {
	top: -15px;
	border-color: transparent transparent #303133 transparent;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
}
.tooltip-arrow.right {
	left: -15px;
	top: 50%;
	transform: translate3d(0, -50%, 0);
	border-color: transparent #303133 transparent transparent;
}
.tooltip-arrow.top {
	bottom: -15px;
	border-color: #303133 transparent transparent transparent;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
}
